import React, { Component } from 'react';
import FlatButton from 'material-ui/FlatButton';

import { moment } from '../Utils/Helper';

import ChatList from './ChatList';

export default class ChatContent extends Component {
  componentWillUpdate() {
    this.formerMsgLength = this.props.messages.length;
    this.formerScrollHeight = this.refs.dialogContent.scrollHeight;
  }

  componentDidUpdate() {
    let msgLength = this.props.messages.length;
    if (msgLength - this.formerMsgLength === 1) {
      this.refs.dialogContent.scrollTop = this.refs.dialogContent.scrollHeight;
    } else if (msgLength - this.formerMsgLength > 1) {
      if (this.formerScrollHeight === 420) {
        this.refs.dialogContent.scrollTop = this.refs.dialogContent.scrollHeight;
      } else {
        this.refs.dialogContent.scrollTop = this.refs.dialogContent.scrollHeight - this.formerScrollHeight;
      }
    }
  }

  render() {
    let elements = this.props.messages.map((item, index) => {
      let createdAt;
      let info;
      
      if (!this.nextTimestamp) {
        this.nextTimestamp = moment(item.created_at).unix() - 600;
      }

      let thisTimestamp = moment(item.created_at).unix();
      let secondRange = thisTimestamp - this.nextTimestamp;

      if (index === 0) {
        secondRange = 600;
      }

      if (secondRange >= 600) {
        let a = moment(moment().format('YYYY-MM-DD'));
        let b = moment(moment(item.created_at).format('YYYY-MM-DD'));
        let dayRange = a.diff(b, 'days');
        if (dayRange === 0) {
          createdAt = moment(item.created_at).format('LT')
        } else if (dayRange === 1) {
          createdAt = moment(item.created_at).subtract(0, 'days').calendar()
        } else if (dayRange > 1 && dayRange <= 7) {
          createdAt = moment(item.created_at).format('dddd h:mm')
        } else {
          createdAt = moment(item.created_at).format('lll')
        }
        this.nextTimestamp = moment(item.created_at).unix();
      }

      if (item.user_id == this.props.userId) {
        info = {
          userId: this.props.userId,
          isCurrentUser: true,
          userImg: this.props.userImg,
        }
      }

      if (item.user_id == this.props.friendId) {
        info = {
          userId: this.props.friendId,
          isCurrentUser: false,
          userImg: this.props.friendImg,
        }
      }

      return (
        <ChatList
          key={index}
          isCurrentUser={info.isCurrentUser}
          userImg={info.userImg}
          detail={item.detail}
          createdAt={createdAt}
        />
      );
    });

  	return (
  	  <div ref='dialogContent' style={styles.dialogContent}>
        <div style={styles.content}>
          <FlatButton 
            style={styles.btn} 
            onClick={this.props.fetchMessages}
            label={this.props.nextPageUrl ? '查看更多' : '没有更多了' }
            disabled={this.props.nextPageUrl ? false : true }
          />
          
          {elements}
        </div>
      </div>
  	);
  }
};

const styles = {
  dialogContent: {
    height: 420, 
    overflowY: 'auto'
  },
  content: {
    backgroundColor: '#fff',
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: 24,
    paddingRight: 24,
    flex: 1
  },
  btn: {
    width: '100%',
    borderRadius: 0
  }
};